<template>
  <div class="member">
    <div class="member-form">
      <memberTbody
        @searchData="searchData"
        @addData="addData"
        :title="title"
      ></memberTbody>
      <el-table
        :data="rowData"
        style="width: 100%"
        row-key="id"
        :row-style="{ height: '48px' }"
      >
        <el-table-column
          :prop="item.name"
          v-for="(item, index) in clumnData"
          :key="index"
          :label="item.lable"
          :min-width="item.width"
        ></el-table-column>
        <subTableItem_two
          @selectData="selectData"
          @removeData="removeData"
        ></subTableItem_two>
      </el-table>
      <pageFtoor :rowData="rowData" :countNum="countNum"></pageFtoor>
    </div>
  </div>
</template>
<script>
import memberTbody from "../../components/components_wxq/menberTbody.vue";
import pageFtoor from "../../components/components_wxq/pageFtoor.vue";
import subTableItem_two from "../../components/components_wxq/subTableItem_two.vue";
import storage from "../../utils/storage";
import { initMember, delMember } from "../../utils/api/marke";

export default {
  name: "memberPage",
  components: {
    pageFtoor,
    memberTbody,
    subTableItem_two,
  },
  data() {
    return {
      title: "群组成员",
      countNum: 0,
      nowPage: 1,
      memberPage: {
        id: null,
        page: 1,
      },
      clumnData: [
        { name: "memberName", lable: "姓名", width: 120 },
        { name: "companyName", lable: "公司", width: 160 },
        { name: "phone", lable: "手机", width: 160 },
        { name: "email", lable: "邮箱", width: 200 },
        { name: "createTime", lable: "创建时间", width: 160 },
      ],
      rowData: [],
    };
  },
  methods: {
    searchData(str) {
      console.log(str);
      this.memberPage.search = str;
      this.setTable();
    },
    addData() {
      let id = this.memberPage.id;
      this.$router.push({
        name: "addMemberPage",
        params: {
          H: "新增群员",
          id: id,
        },
      });
    },
    selectData(obj) {
      console.log(obj);
      this.$router.push({
        name: "addMemberPage",
        params: {
          H: "修改群员信息",
          content: {
            ...obj,
          },
        },
      });
    },
    removeData(obj) {
      console.log(obj);
      let id = obj.id;
      this.$confirm("此操作将永久删除该成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(obj);
          delMember(id).then((data) => {
            console.log(data);
            if (data.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              if (this.rowData.length === 1) {
                this.nowPage--;
              }
              this.setTable();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    setTable() {
      initMember(this.memberPage).then((data) => {
        console.log(data);
        this.rowData = data.data.data.groupMembers;
        this.countNum = data.data.data.count;
      });
    },

    changePage(num) {
      console.log(num);
      this.memberPage.page = num;
      this.setTable();
    },

    breakPage(e) {
      storage.setStorage("title", this.title);
      storage.setStorage("id", this.memberPage.id);
    },
  },
  computed: {},
  watch: {},
  mounted() {},
  created() {
    window.addEventListener("beforeunload", (e) => this.breakPage(e));
    this.title =
      this.$route.params.content.title || sessionStorage.getItem("title");
    this.memberPage.id =
      this.$route.params.content.id || sessionStorage.getItem("id");
    console.log(this.memberPage.id);
    this.setTable();
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", (e) => this.breakPage(e));
  },
};
</script>
<style lang="less" scoped>
.member {
  padding: 20px;
}
.member-form {
  padding: 20px 30px;
  background-color: #ffffff;
  border-top: 4px solid #4091ff;
  border-bottom: 2px solid #ccc;
  border-radius: 8px 8px 0 0;
}
</style>
